<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
    	*{
    		margin:0;
    		padding:0;
    	}
        #addToCart {  
            position: fixed;
            left: 600px;  
            cursor: pointer;  
            width: 100px;  
            height: 40px;  
            line-height: 40px;  
            border: 1px solid deeppink;  
            text-align: center;  
            color: deeppink;  
            top:500px;
        }  
        #addToCart:hover {  
            color: #fff;  
            background-color: deeppink;  
        }  
  
        #shopCart {  
            position: fixed;  
            right: 0;  
            top: 200px;  
            color: red;
            text-align: center;  
        }  
        #shopNum{
        	width: 60px;
        	height: 25px;
        	background: deeppink;
        	color:black;
        	text-align: center;
        	line-height: 25px;
        }
        .active{
        	width: 25px;
        	height: 25px;
        	background: skyblue;
        	position: absolute;
        }
    </style>
</head>
<body>
    <div id="addToCart">  
        添加到购物车  
     </div>  	
     <div id="shopCart">  
         购物车  
       <p id="shopNum">0</p>
     </div>
     <script>
         window.onload = function (){
             class Move {
                 constructor (){
                     this.btn = document.querySelector('#addToCart')
                     this.shop = document.querySelector('#shopCart')
                     this.num = document.querySelector('#shopNum')
                     this.bindEvent()
                 }
                 bindEvent () {
                    this.btn.onclick = () =>{
                        var x1 = this.btn.offsetLeft
                        this.x = x1
                        var y1 = this.btn.offsetTop
                        this.y = y1
                        var x3 = this.shop.offsetLeft + this.shop.offsetWidth / 2
                        this.x3 = x3
                        var y3 = this.shop.offsetTop + this.shop.offsetHeight /2
                        var x2 = x3 - 200
                        var y2 = y3 - 120
                        this.a = -((y2-y3)*x1 - (x2-x3)*y1 + x2*y3 - x3*y2) / ((x2-x3) * (x1-x2) * (x1-x3));
                        this.b = ((y2-y3)*x1*x1 + x2*x2*y3 - x3*x3*y2 - (x2*x2 - x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
                        this.c = ((x2*y3 - x3*y2)*x1*x1 - (x2*x2*y3 - x3*x3*y2)*x1 + (x2*x2*x3 - x2*x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
                        this.parabolic(this.a,this.b,this.c,this.x,this.y,this.x3)
                    }
                 }
                 parabolic (a,b,c,x,y,x3) {
                    var div = document.createElement('div')
                    div.style.left = x + 'px'
                    div.style.top = y + 'px'
                    // div.style.display = 'none'
                    document.body.appendChild(div)
                    var timer = setInterval(()=>{
                        x += 10
                        y = a*x*x+b*x+c
                        div.style.top = y +'px'
                        div.style.left = x + 'px'
                        div.className = 'active'
                        // div.style.display = 'block'
                        if(x >=x3){
                            x = x3
                            clearInterval(timer)
                            div.remove()
                            this.num.innerHTML = Number(this.num.innerHTML)+1
                        }
                    },20)
                 }
             }
             new Move()
         }




     </script>
</body>
</html>